<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程列表 - 在线学习平台</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <div class="container">
            <h1>在线学习平台</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="courses.html">课程</a></li>
                    <li><a href="videos.html">视频</a></li>
                    <li><a href="about.html">关于我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <div class="container">
        <!-- 侧边栏切换按钮 -->
        <button id="sidebar-toggle" type="button">打开侧边栏</button>
        <!-- 侧边导航栏 -->
        <aside class="sidebar" id="sidebar">
            <h3>课程分类</h3>
            <ul>
                <li><a href="#">HTML/CSS</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">Python</a></li>
                <li><a href="#">Java</a></li>
                <li><a href="#">C++</a></li>
                <li><a href="#">数据库</a></li>
            </ul>
            <h3>热门标签</h3>
            <ul>
                <li><a href="#">前端开发</a></li>
                <li><a href="#">后端开发</a></li>
                <li><a href="#">移动开发</a></li>
                <li><a href="#">人工智能</a></li>
                <li><a href="#">云计算</a></li>
            </ul>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <section class="book-section">
                <h2>全部课程</h2>
                <div class="books">
                    <div class="book">
                        <img src="img/html.webp" alt="HTML基础教程">
                        <h3>HTML基础教程</h3>
                        <p>学习HTML5的基础知识，掌握网页结构设计</p>
                    </div>
                    <div class="book">
                        <img src="img/css.webp" alt="CSS样式设计">
                        <h3>CSS样式设计</h3>
                        <p>学习CSS3的样式设计，打造精美网页界面</p>
                    </div>
                    <div class="book">
                        <img src="img/javascript.webp" alt="JavaScript入门">
                        <h3>JavaScript入门</h3>
                        <p>学习JavaScript的基础知识和编程思想</p>
                    </div>
                </div>
                <div class="books">
                    <div class="book">
                        <img src="img/1.png" alt="Python编程基础">
                        <h3>Python编程基础</h3>
                        <p>从零开始学习Python编程语言</p>
                    </div>
                    <div class="book">
                        <img src="img/2.png" alt="Java核心技术">
                        <h3>Java核心技术</h3>
                        <p>掌握Java编程语言的核心概念和技术</p>
                    </div>
                    <div class="book">
                        <img src="img/s.png" alt="数据库基础">
                        <h3>数据库基础</h3>
                        <p>学习数据库的基本概念和SQL语句</p>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- 页脚区域 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-info">
                    <h3>关于我们</h3>
                    <p>我们是一家专注于提供优质在线教育资源的平台，帮助学员掌握实用技能，提升职业竞争力。</p>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="courses.html">课程</a></li>
                        <li><a href="videos.html">视频</a></li>
                        <li><a href="about.html">关于我们</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系我们</h3>
                    <p>邮箱: contact@example.com</p>
                    <p>电话: 123-4567-8910</p>
                </div>
            </div>
        </div>
        <!-- 版权声明模块 -->
        <div class="copyright">
            <p>© 2023 在线学习平台 版权所有</p>
        </div>
    </footer>

    <!-- 引入外部JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>